import React, { useState, useEffect } from 'react'
import { View, Picker } from '@tarojs/components'
import Taro,{ useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro'
import { AtList, AtListItem } from 'taro-ui'
import { request } from '@/utils'
import { ALLTABS } from '@/config'
import './index.less'



// const SELECTOR = [{text: '全部', value: 0}, {text: '加油成功', value: 1}, {text: '加油失败', value:2}]

const  FightingDetails = () => {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
  const currentDate = `${year}-${month}`
  const [pageIndex, setPageIndex] = useState(1)
  const [total, setTotal] = useState(0)
  const [list, setList] = useState([])
  // const [selectorChecked, setSelectorChecked] = useState('')
  const [dateSel, setDateSel] = useState(currentDate)
  // const onChange = (e) => {
  //   const { detail: {value}} = e
  //   const { text } = SELECTOR.find((item) => item.value == value)
  //   setSelectorChecked(text)
  // }
  const onDateChange = async (e) => {
    const { detail: { value }} = e
    await setDateSel(value)
    await setPageIndex(1)
    await getList(value, 1)
  }
  const getList = async (day, index, flag) => {
    Taro.showLoading({mask: true})
    const data = await request({url: 'hkshihua/operator/getOperatorOrderDetail', data: {dateMonth: day || dateSel, pageIndex: index || pageIndex}})
    const newData = flag ? [...list, ...data.list] : data.list
    setList(newData)
    setTotal(data.total)
  }
  usePullDownRefresh(async () => {
    await setPageIndex(1)
    await getList(dateSel, 1)
    Taro.stopPullDownRefresh()
  })
  useReachBottom(async () => {
    await setPageIndex(pageIndex + 1)
    if(total <= pageIndex * 10) return
    await getList(dateSel,pageIndex + 1, true)
  })
  useDidShow(() => {
    setPageIndex(1)
    getList(dateSel, 1)
    Taro.getCurrentPages()[0].getTabBar().setData({
      selected: 1
    })
  })
  useEffect(() => {
    Taro.getStorage({key: 'userInfo', success(res){
      const { user } = JSON.parse(res.data)
      Taro.getCurrentPages()[0].getTabBar().setData({
        list: ALLTABS[user.role]
      })
    }})

  }, [])
  return (
    <View >
        {/* <Picker rangeKey='text' mode='selector' range={SELECTOR} onChange={onChange}>
                <AtList>
                  <AtListItem
                    title='请选择状态'
                    extraText={selectorChecked}
                  />
                </AtList>
        </Picker> */}
        <View>
            <View>
              <Picker fields='month' mode='date' onChange={onDateChange}>
                <AtList>
                  <AtListItem title='请选择日期' extraText={dateSel} />
                </AtList>
              </Picker>
            </View>
        </View>
        <View>

        </View>
        <View className='m-list-1'>
          {list.map((item) => {
            return <View key={item.id} className='m-item-1'>
            <View className='at-row'>
              <View className='at-col at-col-10 at-col--wrap'>
                <View className='at-row'>
                  <View className='at-col at-col-6 at-col--wrap'>{item.supplierName}</View>
                  <View className='at-col at-col-8 at-col--wrap'>加油量 {item.num}升</View>
                </View>
                <View className='at-row'>
                  <View className='at-col at-col-6 at-col--wrap'>{item.name}</View>
                  <View className='at-col at-col-8 at-col--wrap'>{item.licensePlateNumber}</View>
                </View>
                <View className='at-row'>
                  <View className='at-col at-col-6 at-col--wrap'>加油工:{item.createUserName}</View>
                  <View className='at-col at-col-8 at-col--wrap'>{item.createTime}  </View>
                </View></View>
              {/* <View className='at-col at-col-2 at-col--wrap'>图片</View> */}
            </View>
          </View>
          })}
          {list.length <= 0 && <View className='no-data'>暂无数据</View>}
          {pageIndex * 10 >= total && list.length > 0 && <View className='no-data'>暂无更多数据</View>}
          <View style={{height: '110px'}}></View>
        </View>

      </View>
  )
}


export default FightingDetails
